<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title>Event Action Element</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<meta name="generator" content="Org-mode"/>
<meta name="generated" content="2010-06-14 18:35:31 EDT"/>
<meta name="author" content="Rusty Klophaus (@rklophaus)"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<style type="text/css">
 <!--/*--><![CDATA[/*><!--*/
  html { font-family: Times, serif; font-size: 12pt; }
  .title  { text-align: center; }
  .todo   { color: red; }
  .done   { color: green; }
  .tag    { background-color: #add8e6; font-weight:normal }
  .target { }
  .timestamp { color: #bebebe; }
  .timestamp-kwd { color: #5f9ea0; }
  p.verse { margin-left: 3% }
  pre {
	border: 1pt solid #AEBDCC;
	background-color: #F3F5F7;
	padding: 5pt;
	font-family: courier, monospace;
        font-size: 90%;
        overflow:auto;
  }
  table { border-collapse: collapse; }
  td, th { vertical-align: top; }
  dt { font-weight: bold; }
  div.figure { padding: 0.5em; }
  div.figure p { text-align: center; }
  .linenr { font-size:smaller }
  .code-highlighted {background-color:#ffff00;}
  .org-info-js_info-navigation { border-style:none; }
  #org-info-js_console-label { font-size:10px; font-weight:bold;
                               white-space:nowrap; }
  .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
                                 font-weight:bold; }
  /*]]>*/-->
</style>
<LINK href='../stylesheet.css' rel='stylesheet' type='text/css' />
<script type="text/javascript">
<!--/*--><![CDATA[/*><!--*/
 function CodeHighlightOn(elem, id)
 {
   var target = document.getElementById(id);
   if(null != target) {
     elem.cacheClassElem = elem.className;
     elem.cacheClassTarget = target.className;
     target.className = "code-highlighted";
     elem.className   = "code-highlighted";
   }
 }
 function CodeHighlightOff(elem, id)
 {
   var target = document.getElementById(id);
   if(elem.cacheClassElem)
     elem.className = elem.cacheClassElem;
   if(elem.cacheClassTarget)
     target.className = elem.cacheClassTarget;
 }
/*]]>*///-->
</script>
</head>
<body>
<div id="content">

<h1 class="title">Event Action Element</h1>

<p><a href="../index.html">Getting Started</a> | <a href="../api.html">API</a> | <a href="../elements.html">Elements</a> | Actions | <a href="../validators.html">Validators</a> | <a href="../handlers.html">Handlers</a> | <a href="../about.html">About</a>
</p>


<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">1 Event Action - #event {} </a></li>
</ul>
</div>
</div>

<div id="outline-container-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Event Action - #event {} </h2>
<div class="outline-text-2" id="text-1">


<p>
This action tells Nitrogen to listen for a client side
event, and take some action when the event is triggered.
</p>
<p>
An event action can trigger a postback to the server, a block of Javascript,
other actions, or any combination of the three.
</p>
<p>
If the 'postback' attribute is defined, the page will post back to the event/1 function
with the postback value as the sole attribute. This postback value can be any Erlang term.
</p>
<p>
If the 'actions' attribute is set (inherited from action base), then these actions will
be run when this event is triggered. This attributed can be set to a list of actions, a single
action, or an Erlang string, which will be run as Javascript.
</p>
<p>
Within the Javascript, you can use obj('id') where id is the id of a Nitrogen element. You can
also use obj('me') to refer to the target of the current action.
</p>

</div>

<div id="outline-container-1.1" class="outline-3">
<h3 id="sec-1.1"><span class="section-number-3">1.1</span> Usage </h3>
<div class="outline-text-3" id="text-1.1">





<pre class="src src-erlang"><span style="color: #28439B;">wf</span>:<span style="color: #28439B;">wire</span>(myDiv1, #<span style="color: #28439B;">event</span> { type=click, actions=#<span style="color: #28439B;">confirm</span> { text=<span style="color: #09A240;">"Are you sure?"</span>, postback=continue } })
</pre>





<pre class="src src-erlang"><span style="color: #28439B;">wf</span>:<span style="color: #28439B;">wire</span>(myDiv2, #<span style="color: #28439B;">event</span> { type=click, postback={clicked, myDiv2} })
</pre>




</div>

</div>

<div id="outline-container-1.2" class="outline-3">
<h3 id="sec-1.2"><span class="section-number-3">1.2</span> Attributes </h3>
<div class="outline-text-3" id="text-1.2">


<dl>
<dt>type - (<i>atom</i>)</dt><dd>
Type of the event, can be any Javascript-able event, such as 'click', 'mouseover', 'mouseout', etc. Or, set to 'timer' to automatically call the event after a certain period of time.

</dd>
<dt>delay - (<i>integer</i>)</dt><dd>
Use along with type of 'timer'. Milliseconds to delay before calling the event.

</dd>
<dt>postback - (<i>Erlang term</i>)</dt><dd>
When this event fires, Nitrogen will initiate an event postback with the supplied term.

</dd>
<dt>delegate - (<i>atom</i>)</dt><dd>
Delegate is the name of the module that will receive this event. Default to the current page.

</dd>
</dl>
</div>

</div>

<div id="outline-container-1.3" class="outline-3">
<h3 id="sec-1.3"><span class="section-number-3">1.3</span> Callbacks </h3>
<div class="outline-text-3" id="text-1.3">



</div>

<div id="outline-container-1.3.1" class="outline-4">
<h4 id="sec-1.3.1"><span class="section-number-4">1.3.1</span> event(Tag) </h4>
<div class="outline-text-4" id="text-1.3.1">


<p>
Called when the event is fired. Tag is specified in the 'postback' attribute.
</p>
</div>
</div>

</div>

<div id="outline-container-1.4" class="outline-3">
<h3 id="sec-1.4"><span class="section-number-3">1.4</span> See Also </h3>
<div class="outline-text-3" id="text-1.4">


<ul>
<li>
<a href="./base.html">base element</a>


</li>
</ul>
</div>
</div>
</div>
<div id="postamble">
<p class="author"> Author: Rusty Klophaus (@rklophaus)
<a href="mailto:">&lt;&gt;</a>
</p>
<p class="date"> Date: 2010-06-14 18:35:31 EDT</p>
<p class="creator">HTML generated by org-mode 6.33f in emacs 22</p>
</div>
</div>
</body>
</html>
